<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>&nbsp;平台推荐企业列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 新增按钮 -->
            <el-button type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>
            <!-- 筛选条件 -->
            <div style="height:40px"></div>
            <el-form :inline="true"  class="demo-form-inline" style="margin-bottom:15px;">
                <el-form-item label="选择分类:">
                    <el-select v-model="category" placeholder="请选择分类" @change="changeSelect">
                        <el-option v-for="item in options" :key="item.category" :label="item.label" :value="item.category"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称:">
                    <el-input v-model="name" placeholder="请输入企业名称" clearable style="width:280px;"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="onSelect"> &nbsp;&nbsp;查询&nbsp;&nbsp;  </el-button>
                    <el-button type="primary" @click="onResetting" plain> &nbsp;&nbsp;重置&nbsp;&nbsp;  </el-button>
                </el-form-item>
            </el-form>
            <!-- 表格列表 -->
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column  prop="id" label="ID" width="60" align="center"> </el-table-column>
                <el-table-column label="封面图" width="120" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.head_img" style="width:110px;height:110px;"/>
                    </template>
                </el-table-column>
                <el-table-column  prop="name" label="公司名称" align="center"> </el-table-column>
                <el-table-column  prop="address" label="公司地址" align="center"> </el-table-column>
                <el-table-column  prop="telephone" label="电话" width="150" align="center"> </el-table-column>
                <el-table-column  prop="longitude" label="经度" width="120" align="center"> </el-table-column>
                <el-table-column  prop="latitude" label="纬度" width="120" align="center"> </el-table-column>
                <el-table-column  prop="category" label="分类" width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.category == 1">印刷企业</div>
                        <div v-if="scope.row.category == 2">包装企业</div>
                        <div v-if="scope.row.category == 3">数码快印</div>
                        <div v-if="scope.row.category == 4">设备耗材</div>
                    </template>
                </el-table-column>
                <el-table-column  prop="create_time" label="更新时间" width="150" align="center"> </el-table-column>
                <el-table-column label="操作" width="200" align="center" >
                        <template slot-scope="scope" >
                            <el-button size="small" type="text" @click="handleLook(scope.$index, scope.row)" >查看</el-button>
                            <el-button class="edit" size="small" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button class="del" size="small" type="text"  @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
                        </template>
                    </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination" v-show="totalPages>1">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
                </el-pagination>
            </div>     
        </div>
    
    </div>
</template>
<script>
import {getYinCList,getYinCDelete} from '@/api/company'
export default {
    name:"companyList",
     //声明组件
    components:{
    
    },
    data() {
        return {
            category:0,//分类：0不限、1印刷企业、2包装企业、3数码快印、4设备耗材
            value:'不限',
            pageIndex:1,//当前页码
            pageSize:10,//每页10条
            totalElements:1,//默认的总条数
            totalPages:1,//默认的总页数
            tableData:[],//表格列表数据
            delVisible:false, //默认dialog 不弹出
            name:'',//印厂名称
            options:[{category:0,label:'不限'},{category:1,label:'印刷企业'},{category:2,label:'包装企业'},{category:3,label:'数码快印'},{category:4,label:'设备耗材'}],//分类
        }
    },
    //实例创建
    created(){
        this.getYinCList();//获取印厂列表
    },
    //计算属性
    watch:{
        
    },
    //方法
    methods: {
        //获取数据
        getYinCList(){
            getYinCList(this.category,this.name,this.pageIndex,this.pageSize).then((response)=> {
                if(response.code==200){
                    this.tableData = response.data.list;//列表数据
                    this.totalElements = response.data.total; //总条数
                    this.totalPages = Math.ceil(response.data.total/this.pageSize);//总页数
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: response.msg
                    });
                }
            })
        },
        //删除企业
        handleDelete(index,row){
            this.$alert('您确定要删除该推荐企业嘛？删除不可撤回！', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //确定
                getYinCDelete(row.id).then(res => {
                    if(res.code == 200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        }); 
                        this.getYinCList();//更新数据
                    }else{
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        }); 
                    }
                })
            }).catch(() => {
                //取消
                    
            });
        },
        //选择分类
        changeSelect(value){
            this.category = value;
        },
        //查询
        onSelect(){
            this.pageIndex =1;
            this.getYinCList();
        },
        //重置筛选条件
        onResetting(){
            this.name = '';
            this.category = 0;
            this.getYinCList();
        },
        //分页
        handleCurrentChange(val){
            this.pageIndex =val;
            this.getYinCList();
        },
        //跳转，新增企业
        toAdd(){
            this.$router.push({path:'/platform/add',query:{}})
        },
        //查看详情
        handleLook(index,row){
            if(row.id && row.id>0){
                this.$router.push({ path: '/platform/detail',query:{id:row.id}});
            }
        },
        //跳转，编辑企业
        handleEdit(index,row){
            if(row.id && row.id>0){
                this.$router.push({ path: '/platform/edit',query:{id:row.id}});
            }
        }
        
    }
}
</script>
<style lang="stylus" scoped>
    .edit{
        color: #ff9800;
    }
    .del{
        color: #e51c23;
    }
    .download{
        color: #67C23A;
    }
</style>


